<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Bootstrap Iconpicker</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="css/docs.css"/>
        <link rel="stylesheet" href="css/pygments-manni.css"/>
        <link rel="stylesheet" href="icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
        <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"/>
        <link rel="stylesheet" href="icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.1/css/weather-icons.min.css"/>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.min.css"/> -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css"/>
        <link rel="stylesheet" href="dist/css/bootstrap-iconpicker.css"/>

        <style type="text/css">
            .bg-gray {
                color: #777;
                background-color: #eee;
            }
            #btnGithub, #btnDonate {
                width: 200px;
            }
            #btnGithub span, #btnDonate span {
                font-style: italic;
            }
            #btnStars, #btnForks, #btnReleases, #btnContributors {
                font-weight: bold;
            }
            .tab-content {
                padding: 12px;
                border-left: 1px solid #ddd;
                border-right: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
            }
            code.code-default {
                color: #ffffff;
                background-color: #f0ad4e;
            }
            code.code-info {
                color: #ffffff;
                background-color: #5bc0de;
            }
            code.code-options {
                color: #ffffff;
                background-color: #9b59b6;
            }
            code.code-event {
                color: #ffffff;
                background-color: #449d44;
            }
            code.code-method {
                color: #ffffff;
                background-color: #357ebd;
            }
            #console {
                height: 135px;
                overflow-y: scroll;
                color: white;
                background-color: black;
            }
        </style>

    </head>
    <body>

        <!-- Begin :: Donate Form -->
      	<form id="formDonate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
      	    <input type="hidden" name="cmd" value="_s-xclick">
      	    <input type="hidden" name="hosted_button_id" value="XFTVFLZRPACGN">
      	</form>
      	<!-- End :: Donate Form -->

        <div class="container">

            <div class="row text-center text-primary">
                <h1>Bootstrap-Iconpicker <small><em>By Victor Valencia Rico.</em></small></h1>
                <img src="bootstrap-iconpicker.png" title="Iconpicker" alt="Iconpicker"/></br>
                <span>A simple iconpicker for Bootstrap 3.x</span>
            </div>

            <div class="row text-center" style="padding-top: 20px;">
               <div class="col-md-12">
                    <div class="btn-group buttons-menu-container">
                        <a id="btnGithub" class="btn btn-primary" href="https://github.com/victor-valencia/bootstrap-iconpicker" target="_blank" role="button">
                            <i class="fa fa-github-alt fa-2x"></i></br>
                            View on Git Hub</br>
                            <span>Lastest version ({0})</span>
                        </a>
                    </div>
                    <div class="btn-group buttons-menu-container">
                        <a id="btnDonate" class="btn btn-warning" href="#" target="_blank" role="button">
                            <i class=" fa fa-cc-paypal fa-2x"></i></br> Donate </br>
                            <span>Buy me a beer!</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="row text-center" style="padding-top: 20px;">
               <div class="col-md-12">
                    <div class="btn-group buttons-menu-container">
                        <a class="btn btn-default bg-gray" href="https://github.com/victor-valencia/bootstrap-iconpicker/stargazers" target="_blank" role="button">
                            <i class="octicon octicon-star"></i> Stars
                        </a>
                        <a id="btnStars" class="btn btn-default" href="https://github.com/victor-valencia/bootstrap-iconpicker/stargazers" target="_blank" role="button">
                            &nbsp;
                        </a>
                    </div>
                    <div class="btn-group buttons-menu-container">
                        <a class="btn btn-default bg-gray" href="https://github.com/victor-valencia/bootstrap-iconpicker/fork" target="_blank" role="button">
                            <i class="octicon octicon-repo-forked"></i> Fork
                        </a>
                        <a id="btnForks" class="btn btn-default" href="https://github.com/victor-valencia/bootstrap-iconpicker/fork" target="_blank" role="button">
                            &nbsp;
                        </a>
                    </div>
                    <div class="btn-group buttons-menu-container">
                        <a class="btn btn-default bg-gray" href="https://github.com/victor-valencia/bootstrap-iconpicker/releases" target="_blank" role="button">
                            <i class="octicon octicon-tag"></i> Releases
                        </a>
                        <a id="btnReleases" class="btn btn-default" href="https://github.com/victor-valencia/bootstrap-iconpicker/releases" target="_blank" role="button">
                            &nbsp;
                        </a>
                    </div>
                    <div class="btn-group buttons-menu-container">
                        <a class="btn btn-default bg-gray" href="https://github.com/victor-valencia/bootstrap-iconpicker/graphs/contributors" target="_blank" role="button">
                            <i class="octicon octicon-organization"></i> Contributors
                        </a>
                        <a id="btnContributors" class="btn btn-default" href="https://github.com/victor-valencia/bootstrap-iconpicker/graphs/contributors" target="_blank" role="button">
                            &nbsp;
                        </a>
                    </div>
                </div>
            </div>

            <div class="row text-center" style="padding-top: 20px;">
               <div class="col-md-12">
                    <div class="btn-group buttons-menu-container">
                        <a id="btnDownloadZip" class="btn btn-default" href="#" role="button">
                            <i class="octicon octicon-file-zip"></i> Download ({0}).zip
                        </a>
                    </div>
                    <div class="btn-group buttons-menu-container">
                        <a id="btnDownloadTar" class="btn btn-default" href="#" role="button">
                            <i class="octicon octicon-file-zip"></i> Download ({0}).tar.gz
                        </a>
                    </div>
                </div>
            </div>

            <h1 class="page-header">Configuration.</h1>

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li class="dropdown active">
                    <a id="tabConfig" class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="glyphicon glyphicon-camera"></i> Glyphicon (Bootstrap) <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#elusiveicon" role="tab" data-toggle="tab"><i class="el-icon-female"></i> Elusive Icons 2.0.0</a></li>
                        <li><a href="#flagicon" role="tab" data-toggle="tab"><i class="flag-icon flag-icon-mx"></i> Flag Icon 2.8.0</a></li>
                        <li><a href="#fontawesome" role="tab" data-toggle="tab"><i class="fa fa-wifi"></i> Font Awesome 4.7.0</a></li>
                        <li><a href="#glyphicon" role="tab" data-toggle="tab"><i class="glyphicon glyphicon-camera"></i> Glyphicon (Bootstrap)</a></li>
                        <li><a href="#ionicon" role="tab" data-toggle="tab"><i class="ion-ionic"></i> Ionicons 2.0.1</a></li>
                        <li><a href="#mapicon" role="tab" data-toggle="tab"><i class="map-icon-walking"></i> Map Icons 2.1.0</a></li>
                        <li><a href="#materialdesign" role="tab" data-toggle="tab"><i class="zmdi zmdi-3d-rotation"></i> Material Design 2.2.0</a></li>
                        <li><a href="#octicon" role="tab" data-toggle="tab"><i class="octicon octicon-bug"></i> Octicons 2.1.2</a></li>
                        <li><a href="#typicon" role="tab" data-toggle="tab"><i class="typcn typcn-anchor"></i> Typicons 2.0.9</a></li>
                        <li><a href="#weathericon" role="tab" data-toggle="tab"><i class="wi wi-day-rain"></i> Weather Icons 1.2.0</a></li>
                    </ul>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="glyphicon">
                    <p>1.- Add the style files: <code>bootstrap.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/&gt;</span>
</code>
                        </pre>
                    </div>

                    <p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code>, <code>bootstrap-iconpicker-iconset-all.min.js</code> and <code>bootstrap-iconpicker.min.js</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- jQuery CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker Iconset --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker-iconset-all.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code>
                        </pre>
                    </div>
                    <p>Result</p>
                    <div data-iconset="glyphicon" role="iconpicker"></div>
                </div>
                <div class="tab-pane" id="ionicon">
                    <p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>ionicons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Ionicons CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/&gt;</span>
</code>
                        </pre>
                    </div>

                    <p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code>, <code>bootstrap-iconpicker-iconset-all.min.js</code> and <code>bootstrap-iconpicker.min.js</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- jQuery CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker Iconset --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker-iconset-all.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code>
                        </pre>
                    </div>
                    <p>Result</p>
                    <div data-iconset="ionicon" role="iconpicker"></div>
                    <div class="bs-callout bs-callout-info">
                        <h4>Iconset versions availables are:</h4>
                        <p>
                            <code>2.0.1</code>       <span class="c">//Use CDN => </span><span class="o">http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css</span></br>
                            <code>1.5.2</code>       <span class="c">//Use CDN => </span><span class="o">http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css</span></br>
                        </p>
                    </div>
                </div>
                <div class="tab-pane" id="flagicon">
                    <p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>flag-icon.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Flag Icons CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/&gt;</span>
</code>
                        </pre>
                    </div>

                    <p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code>, <code>bootstrap-iconpicker-iconset-all.min.js</code> and <code>bootstrap-iconpicker.min.js</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- jQuery CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker Iconset --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker-iconset-all.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code>
                        </pre>
                    </div>
                    <p>Result</p>
                    <div data-iconset="flagicon" role="iconpicker"></div>
                </div>
                <div class="tab-pane" id="fontawesome">
                    <p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>font-awesome.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Font Awesome CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/&gt;</span>
</code>
                        </pre>
                    </div>

                    <p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code>, <code>bootstrap-iconpicker-iconset-all.min.js</code> and <code>bootstrap-iconpicker.min.js</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- jQuery CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker Iconset --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker-iconset-all.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code>
                        </pre>
                    </div>
                    <p>Result</p>
                    <div data-iconset="fontawesome" role="iconpicker"></div>
                    <div class="bs-callout bs-callout-info">
                        <h4>Iconset versions availables are:</h4>
                        <p>
                            <code>4.7.0</code>       <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css</span></br>
                            <code>4.6.0</code>       <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css</span></br>
                            <code>4.5.0</code>       <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css</span></br>
                            <code>4.4.0</code>       <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css</span></br>
                            <code>4.3.0</code>       <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css</span></br>
                            <code>4.2.0</code>       <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css</span></br>
                            <code>4.1.0</code>       <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css</span></br>
                            <code>4.0.0</code>       <span class="c">//Use CDN => </span><span class="o">https://maxcdn.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css</span>
                        </p>
                    </div>
                </div>
                <div class="tab-pane" id="weathericon">
                    <p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>weather-icons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Weather Icons --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/&gt;</span>
</code>
                        </pre>
                    </div>

                    <p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code>, <code>bootstrap-iconpicker-iconset-all.min.js</code> and <code>bootstrap-iconpicker.min.js</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- jQuery CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker Iconset --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker-iconset-all.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code>
                        </pre>
                    </div>
                    <p>Result</p>
                    <div data-iconset="weathericon" role="iconpicker"></div>
                </div>
                <div class="tab-pane" id="mapicon">
                    <p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>map-icons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Map Icons --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"icon-fonts/map-icons-2.1.0/css/map-icons.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/&gt;</span>
</code>
                        </pre>
                    </div>

                    <p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code>, <code>bootstrap-iconpicker-iconset-all.min.js</code> and <code>bootstrap-iconpicker.min.js</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- jQuery CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker Iconset --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker-iconset-all.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code>
                        </pre>
                    </div>
                    <p>Result</p>
                    <div data-iconset="mapicon" role="iconpicker"></div>
                </div>
                <div class="tab-pane" id="octicon">
                    <p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>octicons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Octicons CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/&gt;</span>
</code>
                        </pre>
                    </div>

                    <p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code>, <code>bootstrap-iconpicker-iconset-all.min.js</code> and <code>bootstrap-iconpicker.min.js</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- jQuery CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker Iconset --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker-iconset-all.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code>
                        </pre>
                    </div>
                    <p>Result</p>
                    <div data-iconset="octicon" role="iconpicker"></div>
                    <div class="bs-callout bs-callout-info">
                        <h4>Iconset versions availables are:</h4>
                        <p>
                            <code>4.4.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css</span></br>
                            <code>4.3.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.3.0/font/octicons.min.css</span></br>
                            <code>4.2.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.2.1/font/octicons.min.css</span></br>
                            <code>4.2.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.2.0/font/octicons.min.css</span></br>
                            <code>4.1.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.1.1/font/octicons.min.css</span></br>
                            <code>4.1.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.1.0/font/octicons.min.css</span></br>
                            <code>4.0.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/4.0.0/font/octicons.min.css</span></br>
                            <code>3.5.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css</span></br>
                            <code>3.4.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.4.1/octicons.min.css</span></br>
                            <code>3.4.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.4.0/octicons.min.css</span></br>
                            <code>3.3.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.3.0/octicons.min.css</span></br>
                            <code>3.2.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.2.0/octicons.min.css</span></br>
                            <code>3.1.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.1.0/octicons.min.css</span></br>
                            <code>3.0.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.0.1/octicons.min.css</span></br>
                            <code>3.0.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/3.0.0/octicons.min.css</span></br>
                            <code>2.4.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.4.1/octicons.min.css</span></br>
                            <code>2.4.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.4.0/octicons.min.css</span></br>
                            <code>2.3.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.3.0/octicons.min.css</span></br>
                            <code>2.2.3</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.3/octicons.min.css</span></br>
                            <code>2.2.2</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.2/octicons.min.css</span></br>
                            <code>2.2.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.1/octicons.min.css</span></br>
                            <code>2.2.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.2.0/octicons.min.css</span></br>
                            <code>2.1.2</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.2/octicons.min.css</span></br>
                            <code>2.1.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.1/octicons.min.css</span></br>
                            <code>2.1.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.1.0/octicons.min.css</span></br>
                            <code>2.0.2</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css</span></br>
                            <code>2.0.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.1/octicons.min.css</span></br>
                            <code>2.0.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/octicons/2.0.0/octicons.min.css</span>
                        </p>
                    </div>
                </div>
                <div class="tab-pane" id="typicon">
                    <p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>typicons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Typicons CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/&gt;</span>
</code>
                        </pre>
                    </div>

                    <p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code>, <code>bootstrap-iconpicker-iconset-all.min.js</code> and <code>bootstrap-iconpicker.min.js</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- jQuery CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker Iconset --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker-iconset-all.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code>
                        </pre>
                    </div>
                    <p>Result</p>
                    <div data-iconset="typicon" role="iconpicker"></div>
                    <div class="bs-callout bs-callout-info">
                        <h4>Iconset versions availables are:</h4>
                        <p>
                            <code>2.0.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.1/typicons.min.css</span></br>
                            <code>2.0.2</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.2/typicons.min.css</span></br>
                            <code>2.0.3</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.3/typicons.min.css</span></br>
                            <code>2.0.4</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.4/typicons.min.css</span></br>
                            <code>2.0.5</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.5/typicons.min.css</span></br>
                            <code>2.0.6</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.6/typicons.min.css</span></br>
                            <code>2.0.7</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css</span></br>
                            <code>2.0.8</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.8/typicons.min.css</span></br>
                            <code>2.0.9</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css</span>
                        </p>
                    </div>
                </div>
                <div class="tab-pane" id="elusiveicon">
                    <p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>elusive-icons.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Elusive Icons --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/&gt;</span>
</code>
                        </pre>
                    </div>

                    <p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code>, <code>bootstrap-iconpicker-iconset-all.min.js</code> and <code>bootstrap-iconpicker.min.js</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- jQuery CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker Iconset --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker-iconset-all.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code>
                        </pre>
                    </div>
                    <p>Result</p>
                    <div data-iconset="elusiveicon" role="iconpicker"></div>
                </div>
                <div class="tab-pane" id="materialdesign">
                    <p>1.- Add the style files: <code>bootstrap.min.css</code>, <code>material-design-iconic-font.min.css</code> and <code>bootstrap-iconpicker.min.css</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Material Design CDN --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"</span><span class="nt">/&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"dist/css/bootstrap-iconpicker.min.css"</span><span class="nt">/&gt;</span>
</code>
                        </pre>
                    </div>

                    <p>2.- Add the javascript files: <code>jquery-1.10.2.min.js</code>, <code>bootstrap.min.js</code>, <code>bootstrap-iconpicker-iconset-all.min.js</code> and <code>bootstrap-iconpicker.min.js</code></p>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="c">&lt;!-- jQuery CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap CDN --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker Iconset --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker-iconset-all.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
<span class="c">&lt;!-- Bootstrap-Iconpicker --&gt;</span>
<span class="nt">&lt;script</span> <span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"dist/js/bootstrap-iconpicker.min.js"</span><span class="nt">&gt;</span><span class="nt">&lt;/script&gt;</span>
</code>
                        </pre>
                    </div>
                    <p>Result</p>
                    <div data-iconset="materialdesign" role="iconpicker"></div>
                    <div class="bs-callout bs-callout-info">
                        <h4>Iconset versions availables are:</h4>
                        <p>
                            <code>2.2.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css</span></br>
                            <code>2.1.2</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.2/css/material-design-iconic-font.min.css</span></br>
                            <code>2.1.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.1/css/material-design-iconic-font.min.css</span></br>
                            <code>2.1.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.0/css/material-design-iconic-font.min.css</span></br>
                            <code>2.0.2</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.2/css/material-design-iconic-font.min.css</span></br>
                            <code>2.0.1</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.1/css/material-design-iconic-font.min.css</span></br>
                            <code>2.0.0</code>       <span class="c">//Use CDN => </span><span class="o">https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.0.0/css/material-design-iconic-font.min.css</span></br>
                            <code>1.1.1</code>       <span class="c">//Deprecated </span>
                        </p>
                    </div>
                </div>
            </div>

            <h1 class="page-header">Via data attributes.</h1>

            <h4>Initialize.</h4>
            <p>Add <code>role="iconpicker"</code> to initialize the iconpicker.</p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-6">
                        <p><code>button</code></br><code>role="iconpicker"</code></p>
                        <button class="btn btn-default" role="iconpicker"></button>
                    </div>
                    <div class="col-md-6">
                        <p><code>div</code></br><code>role="iconpicker"</code></p>
                        <div role="iconpicker"></div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="c">&lt;!-- Button tag --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Div tag --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span></code>
                </pre>
            </div>

            <div class="bs-callout bs-callout-info">
                <h4>Use iconpicker in a form</h4>
                <p>Just add attribute <code class="code-default">name=""</code> in button tag or div tag.</p>
            </div>

            <h4>Set Iconset and Icon Selected.</h4>
            <p>Add <code>data-iconset="glyphicon|ionicon|fontawesome|weathericon|mapicon|octicon|typicon|elusiveicon|flagicon"</code> to idicates the iconset. <small>Default: <code class="code-default">data-iconset="glyphicon"</code></small></p>
            <p>Add <code>data-icon=""</code> to select an icon. <small>Default: <code class="code-default">data-icon=""</code></small></p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-6">
                        <p><code>data-iconset="glyphicon"</code></br><code>data-icon="glyphicon-camera"</code></p>
                        <button class="btn btn-default" data-iconset="glyphicon" data-icon="glyphicon-camera" role="iconpicker"></button>
                    </div>
                    <div class="col-md-6">
                        <p><code>data-iconset="ionicon"</code></br><code>data-icon="ion-ionic"</code></p>
                        <button class="btn btn-default" data-iconset="ionicon" data-icon="ion-ionic" role="iconpicker"></button>
                    </div>
                </div>
                <div class="row text-center" style="padding-top: 12px;">
                    <div class="col-md-6">
                        <p><code>data-iconset="fontawesome"</code></br><code>data-icon="fa-wifi"</code></p>
                        <button class="btn btn-default" data-iconset="fontawesome" data-icon="fa-wifi" role="iconpicker"></button>
                    </div>
                    <div class="col-md-6">
                        <p><code>data-iconset="weathericon"</code></br><code>data-icon="wi-day-rain"</code></p>
                        <button class="btn btn-default" data-iconset="weathericon" data-icon="wi-day-rain" role="iconpicker"></button>
                    </div>
                </div>
                <div class="row text-center" style="padding-top: 12px;">
                    <div class="col-md-6">
                        <p><code>data-iconset="mapicon"</code></br><code>data-icon="map-icon-walking"</code></p>
                        <button class="btn btn-default" data-iconset="mapicon" data-icon="map-icon-walking" role="iconpicker"></button>
                    </div>
                    <div class="col-md-6">
                        <p><code>data-iconset="octicon"</code></br><code>data-icon="octicon-bug"</code></p>
                        <button class="btn btn-default" data-iconset="octicon" data-icon="octicon-bug" role="iconpicker"></button>
                    </div>
                </div>
                <div class="row text-center" style="padding-top: 12px;">
                    <div class="col-md-6">
                        <p><code>data-iconset="typicon"</code></br><code>data-icon="typcn-anchor"</code></p>
                        <button class="btn btn-default" data-iconset="typicon" data-icon="typcn-anchor" role="iconpicker"></button>
                    </div>
                    <div class="col-md-6">
                        <p><code>data-iconset="elusiveicon"</code></br><code>data-icon="el-icon-female"</code></p>
                        <button class="btn btn-default" data-iconset="elusiveicon" data-icon="el-icon-female" role="iconpicker"></button>
                    </div>
                </div>
                <div class="row text-center" style="padding-top: 12px;">
                    <div class="col-md-6">
                        <p><code>data-iconset="materialdesign"</code></br><code>data-icon="zmdi-card-sd"</code></p>
                        <button class="btn btn-default" data-iconset="materialdesign" data-icon="zmdi-card-sd" role="iconpicker"></button>
                    </div>
                    <div class="col-md-6">
                        <p><code>data-iconset="flagicon"</code></br><code>data-icon="flag-icon-mx"</code></p>
                        <button class="btn btn-default" data-iconset="flagicon" data-icon="flag-icon-mx" role="iconpicker"></button>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="c">&lt;!-- Example 1 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"glyphicon"</span> <span class="na">data-icon=</span><span class="s">"glyphicon-camera"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 2 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"ionicon"</span> <span class="na">data-icon=</span><span class="s">"ion-ionic"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 3 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"fontawesome"</span> <span class="na">data-icon=</span><span class="s">"fa-wifi"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 4 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"weathericon"</span> <span class="na">data-icon=</span><span class="s">"wi-day-rain"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 5 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"mapicon"</span> <span class="na">data-icon=</span><span class="s">"map-icon-walking"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 6 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"octicon"</span> <span class="na">data-icon=</span><span class="s">"octicon-bug"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 7 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"typicon"</span> <span class="na">data-icon=</span><span class="s">"typcn-anchor"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 8 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"elusiveicon"</span> <span class="na">data-icon=</span><span class="s">"el-icon-female"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 9 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"materialdesign"</span> <span class="na">data-icon=</span><span class="s">"zmdi-card-sd"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 10 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-iconset=</span><span class="s">"flagicon"</span> <span class="na">data-icon=</span><span class="s">"flag-icon-mx"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
</code>
                </pre>
            </div>

            <div class="bs-callout bs-callout-info">
                <h4>Iconset file</h4>
                <p>Should review the <strong>configuration</strong> for each <strong>iconset</strong>.</p>
            </div>

            <h4>Set Search Input.</h4>
            <p>Add <code>data-search="true|false"</code> to show or hide the search field. <small>Default: <code class="code-default">data-search="true"</code></small></p>
            <p>Add <code>data-search-text=""</code> to indicate initial search text. <small>Default: <code class="code-default">data-search-text="Search icon"</code></small></p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-6">
                        <p><code>data-search="true"</code></br><code>data-search-text="Search..."</code></p>
                        <div data-search="true" data-search-text="Search..." role="iconpicker"></div>
                    </div>
                    <div class="col-md-6">
                        <p><code>data-search="false"</code></p>
                        <div data-search="false" role="iconpicker"></div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="c">&lt;!-- Example 1 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-search=</span><span class="s">"true"</span> <span class="na">data-search-text=</span><span class="s">"Search..."</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Example 2 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-search=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span>
</code>
                </pre>
            </div>

            <h4>Set Labels.</h4>
            <p>Add <code>data-header="true|false"</code> to show or hide the header. <small>Default: <code class="code-default">data-header="true"</code></small></p>
            <p>Add <code>data-label-header=""</code> to indicate header text. <small>Default: <code class="code-default">data-label-header="{0} / {1}"</code></small></p>
            <p>Add <code>data-footer="true|false"</code> to show or hide the footer. <small>Default: <code class="code-default">data-footer="true"</code></small></p>
            <p>Add <code>data-label-footer=""</code> to indicate footer text. <small>Default: <code class="code-default">data-label-footer="{0} - {1} of {2}"</code></small></p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-6">
                        <p><code>data-label-header="{0} - {1} pages"</code></br><code>data-label-footer="{0} - {1} of {2} icons"</code></p>
                        <div data-cols="5" data-label-header="{0} - {1} pages" data-label-footer="{0} - {1} of {2} icons" role="iconpicker"></div>
                    </div>
                    <div class="col-md-6">
                        <p><code>data-header="false"</code></br><code>data-footer="false"</code></p>
                        <div data-cols="5" data-header="false" data-footer="false" role="iconpicker"></div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="c">&lt;!-- Example 1 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-label-header=</span><span class="s">"{0} - {1} pages"</span> <span class="na">data-label-footer=</span><span class="s">"{0} - {1} of {2} icons"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Example 2 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-header=</span><span class="s">"false"</span> <span class="na">data-footer=</span><span class="s">"false"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span>
</code>
                </pre>
            </div>

            <h4>Set Rows and Columns.</h4>
            <p>Add <code>data-rows=""</code> to indicates the rows to showing in iconpicker. <small>Default: <code class="code-default">data-rows="4"</code></small></p>
            <p>Add <code>data-cols=""</code> to indicates the columns to showing in iconpicker. <small>Default: <code class="code-default">data-cols="4"</code></small></p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-12">
                        <p><code>data-rows="3"</code></br><code>data-cols="6"</code></p>
                        <div data-rows="3" data-cols="6" role="iconpicker"></div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="nt">&lt;div</span> <span class="na">data-rows=</span><span class="s">"3"</span> <span class="na">data-cols=</span><span class="s">"6"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span></code>
                </pre>
            </div>

            <h4>Set Align. (Only in div tag)</h4>
            <p>Add <code>data-align="left|center|right"</code> to indicate the align. <small>Default: <code class="code-default">data-align="center"</code></small></p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-4">
                        <p><code>data-align="left"</code></p>
                        <div data-align="left" role="iconpicker"></div>
                    </div>
                    <div class="col-md-4">
                        <p><code>data-align="center"</code></p>
                        <div data-align="center" role="iconpicker"></div>
                    </div>
                    <div class="col-md-4">
                        <p><code>data-align="right"</code></p>
                        <div data-align="right" role="iconpicker"></div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="c">&lt;!-- Example 1 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-align=</span><span class="s">"left"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Example 2 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-align=</span><span class="s">"center"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Example 3 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">data-align=</span><span class="s">"right"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span>
</code>
                </pre>
            </div>

            <h4>Set Placement. (Only in button tag)</h4>
            <p>Add <code>data-placement="left|top|bottom|right"</code> to indicate where the iconpicker will be display. <small>Default: <code class="code-default">data-placement="bottom"</code></small></p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-3">
                        <p><code>data-placement="left"</code></p>
                        <button class="btn btn-default" data-icon="glyphicon-arrow-left" data-placement="left" role="iconpicker"></button>
                    </div>
                    <div class="col-md-3">
                        <p><code>data-placement="top"</code></p>
                        <button class="btn btn-default" data-icon="glyphicon-arrow-up" data-placement="top" role="iconpicker"></button>
                    </div>
                    <div class="col-md-3">
                        <p><code>data-placement="bottom"</code></p>
                        <button class="btn btn-default" data-icon="glyphicon-arrow-down" data-placement="bottom" role="iconpicker"></button>
                    </div>
                    <div class="col-md-3">
                        <p><code>data-placement="right"</code></p>
                        <button class="btn btn-default" data-icon="glyphicon-arrow-right" data-placement="right" role="iconpicker"></button>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="c">&lt;!-- Example 1 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-placement=</span><span class="s">"left"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 2 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-placement=</span><span class="s">"top"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 3 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-placement=</span><span class="s">"bottom"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 4 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-placement=</span><span class="s">"right"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
</code>
                </pre>
            </div>

            <h4>Set Style Navigations Buttons.</h4>
            <p>Add <code>data-arrow-class=""</code> to indicate the class of the arrows. <small>Default: <code class="code-default">data-arrow-class="btn-primary"</code></small></p>
            <p>Add <code>data-arrow-prev-icon-class=""</code> to indicates the class icon previous arrow. <small>Default: <code class="code-default">data-arrow-prev-icon-class="glyphicon glyphicon-arrow-left"</code></small></p>
            <p>Add <code>data-arrow-next-icon-class=""</code> to indicates the class icon next arrow. <small>Default: <code class="code-default">data-arrow-next-icon-class="glyphicon glyphicon-arrow-right"</code></small></p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-12">
                        <p><code>data-arrow-class="btn-success"</code></br><code>data-arrow-prev-icon-class="glyphicon glyphicon-chevron-left"</code></br><code>data-arrow-next-icon-class="glyphicon glyphicon-chevron-right"</code></p>
                        <div data-arrow-class="btn-success" data-arrow-prev-icon-class="glyphicon glyphicon-chevron-left" data-arrow-next-icon-class="glyphicon glyphicon-chevron-right" role="iconpicker"></div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="nt">&lt;div</span> <span class="na">data-arrow-class=</span><span class="s">"btn-success"</span> <span class="na">data-arrow-prev-icon-class=</span><span class="s">"glyphicon glyphicon-chevron-left"</span> <span class="na">data-arrow-next-icon-class=</span><span class="s">"glyphicon glyphicon-chevron-right"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span></code>
                </pre>
            </div>

            <h4>Set Style Icons Buttons.</h4>
            <p>Add <code>data-selected-class=""</code> to indicate the class of the selected icon. <small>Default: <code class="code-default">data-selected-class="btn-warning"</code></small></p>
            <p>Add <code>data-unselected-class=""</code> to indicate unselected icons. <small>Default: <code class="code-default">data-unselected-class="btn-default"</code></small></p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-12">
                        <p><code>data-selected-class="btn-danger"</code></br><code>data-unselected-class="btn-info"</code></p>
                        <div data-selected-class="btn-danger" data-unselected-class="btn-info" role="iconpicker"></div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="nt">&lt;div</span> <span class="na">data-selected-class=</span><span class="s">"btn-danger"</span> <span class="na">data-unselected-class=</span><span class="s">"btn-info"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/div&gt;</span></code>
                </pre>
            </div>

            <h4>Button Style.</h4>
            <p>Add in <code>class=""</code> your custom style.</p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-4">
                        <p><code>class="btn btn-default"</code></p>
                        <button class="btn btn-default" data-iconset="fontawesome" data-icon="fa-jsfiddle" role="iconpicker"></button>
                    </div>
                    <div class="col-md-4">
                        <p><code>class="btn btn-primary"</code></p>
                        <button class="btn btn-primary" data-iconset="fontawesome" data-icon="fa-facebook" role="iconpicker"></button>
                    </div>
                    <div class="col-md-4">
                        <p><code>class="btn btn-success"</code></p>
                        <button class="btn btn-success" data-iconset="fontawesome" data-icon="fa-html5" role="iconpicker"></button>
                    </div>
                </div>
                <div class="row text-center" style="padding-top: 12px;">
                    <div class="col-md-4">
                        <p><code>class="btn btn-warning"</code></p>
                        <button class="btn btn-warning" data-iconset="fontawesome" data-icon="fa-stack-overflow" role="iconpicker"></button>
                    </div>
                    <div class="col-md-4">
                        <p><code>class="btn btn-danger"</code></p>
                        <button class="btn btn-danger" data-iconset="fontawesome" data-icon="fa-youtube-play" role="iconpicker"></button>
                    </div>
                    <div class="col-md-4">
                        <p><code>class="btn btn-info"</code></p>
                        <button class="btn btn-info" data-iconset="fontawesome" data-icon="fa-twitter" role="iconpicker"></button>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="c">&lt;!-- Example 1 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 2 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 3 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-success"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 4 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 5 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
<span class="c">&lt;!-- Example 6 --&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-info"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
</code>
                </pre>
            </div>

            <h4>Button addons.</h4>
            <p>You can include it in a <code>class="input-group"</code>.</p>
            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-4 col-md-offset-2">
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button class="btn btn-default" data-icon="glyphicon-map-marker" role="iconpicker"></button>
                            </span>
                            <input type="text" class="form-control" value="My marker">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="input-group">
                            <input type="text" class="form-control" value="My house">
                            <span class="input-group-btn">
                                <button class="btn btn-default" data-icon="glyphicon-home" role="iconpicker"></button>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="c">&lt;!-- Example 1 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-icon=</span><span class="s">"glyphicon-map-marker"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">value=</span><span class="s">"My marker"</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Example 2 --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"input-group"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">value=</span><span class="s">"My house"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"input-group-btn"</span><span class="nt">&gt;</span>
        <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">"btn btn-default"</span> <span class="na">data-icon=</span><span class="s">"glyphicon-home"</span> <span class="na">role=</span><span class="s">"iconpicker"</span><span class="nt">&gt;</span><span class="nt">&lt;/button&gt;</span>
    <span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span>
</code>
                </pre>
            </div>

            <h1 class="page-header">Via JavaScript</h1>

            <h4>Initialize.</h4>
            <h4><small><code class="code-options">.iconpicker(options)</code> Initializes an iconpicker with options.</small></h4>

            <h4>Options.</h4>
            <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-align=""</code>.</p>

            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th style="width: 200px;">Name</th>
                            <th style="width: 120px;">Type</th>
                            <th style="width: 300px;">Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code class="code-options">align</code></td>
                            <td>String</td>
                            <td><code class="code-default">'center'</code></td>
                            <td>(Only in div tag) Align of the iconpicker.</td>
                        </tr>
                        <tr>
                            <td><code class="code-options">arrowClass</code></td>
                            <td>String</td>
                            <td><code class="code-default">'btn-primary'</code></td>
                            <td>Class of the arrows.</td>
                        </tr>
                        <tr>
                            <td><code class="code-options">arrowPrevIconClass</code></td>
                            <td>String</td>
                            <td><code class="code-default">'glyphicon glyphicon-arrow-left'</code></td>
                            <td>Icon class of the previous arrow.</td>
                        </tr>
                        <tr>
                            <td><code class="code-options">arrowNextIconClass</code></td>
                            <td>String</td>
                            <td><code class="code-default">'glyphicon glyphicon-arrow-right'</code></td>
                            <td>Icon class of the next arrow.</td>
                        </tr>
                        <tr>
                            <td><code class="code-options">cols</code></td>
                            <td>Integer</td>
                            <td><code class="code-default">4</td>
                            <td>Number of columns to display in the iconpicker. Min value is: <code class="code-info">4</code></td>
                        </tr>
                        <tr>
                            <td><code class="code-options">footer</code></td>
                            <td>Boolean</td>
                            <td><code class="code-default">true</code></td>
                            <td>Indicates whether to show or hide the footer. <code class="code-info">true|false</code></td>
                        </tr>
                        <tr>
                            <td><code class="code-options">header</code></td>
                            <td>Boolean</td>
                            <td><code class="code-default">true</code></td>
                            <td>Indicates whether to show or hide the header. <code class="code-info">true|false</code></td>
                        </tr>
                        <tr>
                            <td><code class="code-options">icon</code></td>
                            <td>String</td>
                            <td><code class="code-default">''</code></td>
                            <td>Selected icon.</td>
                        </tr>
                        <tr>
                            <td><code class="code-options">iconset</code></td>
                            <td>String | Object</td>
                            <td><code class="code-default">'glyphicon'</code></td>
                            <td>Selected iconset. <code class="code-info">glyphicon|ionicon|fontawesome|weathericon|mapicon|octicon|typicon|elusiveicon</code></br>
                                Object structure is:</br>
                                <code class="code-info">{ iconClass: 'glyphicon', iconClassFix: 'glyphicon-', icons: [ 'play', 'pause' ] }</code>
                            </td>
                        </tr>
                        <tr>
                            <td><code class="code-options">labelHeader</code></td>
                            <td>String</td>
                            <td><code class="code-default">'{0} / {1}'</code></td>
                            <td>Header text.</td>
                        </tr>
                        <tr>
                            <td><code class="code-options">labelFooter</code></td>
                            <td>String</td>
                            <td><code class="code-default">'{0} - {1} of {2}'</code></td>
                            <td>Footer text.</td>
                        </tr>
                        <tr>
                            <td><code class="code-options">placement</code></td>
                            <td>String</td>
                            <td><code class="code-default">'bottom'</code></td>
                            <td>(Only in button tag) Where the iconpicker will be display. <code class="code-info">left|top|bottom|right</code></td>
                        </tr>
                        <tr>
                            <td><code class="code-options">rows</code></td>
                            <td>Integer</td>
                            <td><code class="code-default">4</td>
                            <td>Number of rows to display in the iconpicker. Value <code class="code-info">0</code> indicates all rows.</td>
                        </tr>
                        <tr>
                            <td><code class="code-options">search</code></td>
                            <td>Boolean</td>
                            <td><code class="code-default">true</code></td>
                            <td>Indicates whether to show or hide the search field. <code class="code-info">true|false</code></td>
                        </tr>
                        <tr>
                            <td><code class="code-options">searchText</code></td>
                            <td>String</td>
                            <td><code class="code-default">'Search icon'</code></td>
                            <td>Text of search field.</td>
                        </tr>
                        <tr>
                            <td><code class="code-options">selectedClass</code></td>
                            <td>String</td>
                            <td><code class="code-default">'btn-warning'</code></td>
                            <td>Class of the selected icon.</td>
                        </tr>
                        <tr>
                            <td><code class="code-options">unselectedClass</code></td>
                            <td>String</td>
                            <td><code class="code-default">'btn-default'</code></td>
                            <td>Class of the icons unselected.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-12">
                        <div id="convert_example_1"></div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="c">// Default options</span>
<span class="nx">$(</span><span class="s">'#target'</span><span class="nx">).iconpicker();</span>

<span class="c">// Custom options</span>
<span class="nx">$(</span><span class="s">'#target'</span><span class="nx">).iconpicker({</span>
    <span class="o">align: </span><span class="s">'center'</span>, <span class="c">// Only in div tag</span>
    <span class="o">arrowClass: </span><span class="s">'btn-danger'</span>,
    <span class="o">arrowPrevIconClass: </span><span class="s">'glyphicon glyphicon-chevron-left'</span>,
    <span class="o">arrowNextIconClass: </span><span class="s">'glyphicon glyphicon-chevron-right'</span>,
    <span class="o">cols: </span><span class="nx">10</span>,
    <span class="o">footer: </span><span class="na">true</span>,
    <span class="o">header: </span><span class="na">true</span>,
    <span class="o">icon: </span><span class="s">'fa-bomb'</span>,
    <span class="o">iconset: </span><span class="s">'fontawesome'</span>,
    <span class="o">labelHeader: </span><span class="s">'{0} of {1} pages'</span>,
    <span class="o">labelFooter: </span><span class="s">'{0} - {1} of {2} icons'</span>,
    <span class="o">placement: </span><span class="s">'bottom'</span>, <span class="c">// Only in button tag</span>
    <span class="o">rows: </span><span class="nx">5</span>,
    <span class="o">search: </span><span class="na">true</span>,
    <span class="o">searchText: </span><span class="s">'Search'</span>,
    <span class="o">selectedClass: </span><span class="s">'btn-success'</span>,
    <span class="o">unselectedClass: </span><span class="s">''</span>
<span class="nx">});</span>
</code>
                </pre>
            </div>

            <h4>Events.</h4>

            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th style="width: 400px;">Name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>.on(<code class="code-event">'change'</code>, function(e){})</td>
                            <td>This event fires when select an icon.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="bs-example" style="padding-bottom: 24px;">
                        <div class="row text-center">
                            <div class="col-md-12">
                                <button id="convert_example_2" class="btn btn-primary" data-placement="right" style="margin-left: 30px;"></button>
                            </div>
                        </div>
                    </div>
                    <div class="highlight">
                        <pre>
                            <code class="html"><span class="nx">$(</span><span class="s">'#target'</span><span class="nx">).on(<span class="s">'change'</span>, function(e) {</span>
    <span class="nx">console.log(e.icon);</span>
<span class="nx">});</span>
</code>
                        </pre>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading"><i class="octicon octicon-terminal"></i> Console</div>
                        <div id="console" class="panel-body"></div>
                    </div>
                </div>
            </div>

            <h4>Methods.</h4>

            <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th style="width: 400px;">Name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setAlign'</code>, String)</td>
                            <td>(Only in div tag) Sets align of the iconpicker. <code class="code-info">left|center|right</code></td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setArrowClass'</code>, String)</td>
                            <td>Sets class of the arrows.</td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setArrowPrevIconClass'</code>, String)</td>
                            <td>Sets icon class of the previous arrow.</td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setArrowNextIconClass'</code>, String)</td>
                            <td>Sets icon class of the next arrow.</td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setCols'</code>, Integer)</td>
                            <td>
                                Sets the columns to display in the iconpicker. Min value is: <code class="code-info">4</code>
                            </td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setFooter'</code>, Boolean)</td>
                            <td>Sets whether to show or hide the footer. <code class="code-info">true|false</code></td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setHeader'</code>, Boolean)</td>
                            <td>Sets whether to show or hide the header. <code class="code-info">true|false</code></td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setIcon'</code>, String)</td>
                            <td>Sets an icon.</td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setIconset'</code>, String | Object)</td>
                            <td>
                                Sets an iconset. <code class="code-info">glyphicon|ionicon|fontawesome|weathericon|mapicon|octicon|typicon|elusiveicon</code></br>
                                Object structure is:</br>
                                <code class="code-info">{ iconClass: 'glyphicon', iconClassFix: 'glyphicon-', icons: [ 'play', 'pause' ] }</code>
                            </td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setLabelHeader'</code>, String)</td>
                            <td>Sets header text.</td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setLabelFooter'</code>, String)</td>
                            <td>Sets footer text.</td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setPlacement'</code>, String)</td>
                            <td>(Only in button tag) Sets where the iconpicker will be display. <code class="code-info">left|top|bottom|right</code></td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setRows'</code>, Integer)</td>
                            <td>
                                Sets the rows to display in the iconpicker. Value = <code class="code-info">0</code> indicates all rows.
                            </td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setSearch'</code>, Boolean)</td>
                            <td>Sets whether to show or hide the search field. <code class="code-info">true|false</code></td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setSearchText'</code>, String)</td>
                            <td>Sets the text search field.</td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setSelectedClass'</code>, String)</td>
                            <td>Sets class of the selected icon.</td>
                        </tr>
                        <tr>
                            <td>.iconpicker(<code class="code-method">'setUnselectedClass'</code>, String)</td>
                            <td>Sets class of the icons unselected.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row text-center">
                    <div class="col-md-12">
                        <div id="convert_example_3"></div>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code class="html"><span class="nx">$(</span><span class="s">'#target'</span><span class="nx">).iconpicker()</span>
            <span class="nx">.iconpicker(</span><span class="s">'setAlign'</span><span class="nx">, </span><span class="s">'center'</span><span class="nx">)</span> <span class="c">// Only in div tag</span>
            <span class="nx">.iconpicker(</span><span class="s">'setArrowClass'</span><span class="nx">, </span><span class="s">'btn-success'</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setArrowPrevIconClass'</span><span class="nx">, </span><span class="s">'glyphicon glyphicon-chevron-left'</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setArrowNextIconClass'</span><span class="nx">, </span><span class="s">'glyphicon glyphicon-chevron-right'</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setCols'</span><span class="nx">, </span><span class="nx">9</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setFooter'</span><span class="nx">, </span><span class="na">true</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setHeader'</span><span class="nx">, </span><span class="na">true</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setIcon'</span><span class="nx">, </span><span class="s">'glyphicon-pause'</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setIconset'</span><span class="nx">, {</span>
                <span class="o">iconClass: </span><span class="s">'glyphicon'</span>,
                <span class="o">iconClassFix: </span><span class="s">'glyphicon-'</span>,
                <span class="o">icons: </span><span class="nx">[</span>
                    <span class="s">'fast-backward'</span>,
                    <span class="s">'step-backward'</span>,
                    <span class="s">'backward'</span>,
                    <span class="s">'play'</span>,
                    <span class="s">'pause'</span>,
                    <span class="s">'stop'</span>,
                    <span class="s">'forward'</span>,
                    <span class="s">'step-forward'</span>,
                    <span class="s">'fast-forward'</span>
                <span class="nx">]</span>
            <span class="nx">})</span>
            <span class="nx">.iconpicker(</span><span class="s">'setLabelHeader'</span><span class="nx">, </span><span class="s">'{0} of {1} pages'</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setLabelFooter'</span><span class="nx">, </span><span class="s">'{0} - {1} of {2} icons'</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setPlacement'</span><span class="nx">, </span><span class="s">'bottom'</span><span class="nx">)</span> <span class="c">// Only in button tag</span>
            <span class="nx">.iconpicker(</span><span class="s">'setRows'</span><span class="nx">, </span><span class="nx">0</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setSearch'</span><span class="nx">, </span><span class="na">true</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setSearchText'</span><span class="nx">, </span><span class="s">'Type text'</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setSelectedClass'</span><span class="nx">, </span><span class="s">'btn-danger'</span><span class="nx">)</span>
            <span class="nx">.iconpicker(</span><span class="s">'setUnselectedClass'</span><span class="nx">, </span><span class="s">'btn-primary'</span><span class="nx">);</span>
</code>
                </pre>
            </div>

            <h1 class="page-header">See in action. <small>Button Builder.</small></h1>

            <div class="bs-example" style="padding-bottom: 24px;">
                <div class="row">
                    <div class="col-md-4">
                        <div id="button" class="well text-center" data-position="left" style="height: 290px; padding-top: 120px;">
                            <a href="#" class="btn btn-default"><i class="fa fa-area-chart"></i> Button text</a>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label for="btn-text" class="col-sm-2 control-label">Text: </label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="btn-text" placeholder="Button Text" value="Button Text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="btn-color" class="col-sm-2 control-label">Color: </label>
                                <div class="col-sm-10">
                                    <div id="btn-colors" class="btn-group">
                                        <button name="color" type="button" class="btn btn-default" value="btn-default">Default</button>
                                        <button name="color" type="button" class="btn btn-primary" value="btn-primary">Primary</button>
                                        <button name="color" type="button" class="btn btn-info" value="btn-info">Info</button>
                                        <button name="color" type="button" class="btn btn-success" value="btn-success">Success</button>
                                        <button name="color" type="button" class="btn btn-warning" value="btn-warning">Warning</button>
                                        <button name="color" type="button" class="btn btn-danger" value="btn-danger">Danger</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="btn-color" class="col-sm-2 control-label">Size: </label>
                                <div class="col-sm-10">
                                  <div id="btn-sizes">
                                        <p>
                                            <button class="btn btn-xs btn-default" value="btn-xs" type="button">Mini</button>
                                            <button class="btn btn-sm btn-default" value="btn-sm" type="button">Small</button>
                                            <button class="btn btn-default" value="btn-default" type="button">Default</button>
                                            <button class="btn btn-default btn-lg" value="btn-lg" type="button">Large</button>
                                        </p>
                                        <p>
                                            <a href="#" class="btn btn-default btn-block" data-toggle="button">Full width button</a>
                                        </p>
                                  </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="btn-color" class="col-sm-2 control-label">Icon: </label>
                                <div class="col-sm-10">
                                    <div id="btn-icon" data-iconset="fontawesome" data-icon="fa-area-chart"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="btn-color" class="col-sm-2 control-label">Icon position: </label>
                                <div class="col-sm-10">
                                    <div id="btn-icon-positions" class="btn-group">
                                        <button class="btn btn-default" value="left" type="button"><span class="glyphicon glyphicon-arrow-left"></span> Left</button>
                                        <button class="btn btn-default" value="right" type="button">Right <span class="glyphicon glyphicon-arrow-right"></span></button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="highlight">
                <pre>
                    <code id="result" class="html"></code>
                </pre>
            </div>

            <h1 class="page-header">Leave your comments or fixes here.</h1>

            <div class="row">
                <div class="fb-comments col-md-12 col-xs-12" data-href="http://victor-valencia.github.io/bootstrap-iconpicker/index.html" data-numposts="5" data-colorscheme="light"></div>
            </div>

        </div>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="dist/js/bootstrap-iconpicker-iconset-all.js"></script>
        <script type="text/javascript" src="dist/js/bootstrap-iconpicker.js"></script>

        <script type="text/javascript">

            $(function(){

                $('#convert_example_1').iconpicker({
                    arrowClass: 'btn-danger',
                    arrowPrevIconClass: 'glyphicon glyphicon-chevron-left',
                    arrowNextIconClass: 'glyphicon glyphicon-chevron-right',
                    cols: 10,
                    footer: true,
                    header: true,
                    icon: 'fa-bomb',
                    iconset: 'fontawesome',
                    labelHeader: '{0} of {1} pages',
                    labelFooter: '{0} - {1} of {2} icons',
                    placement: 'bottom',
                    rows: 5,
                    search: true,
                    searchText: 'Search',
                    selectedClass: 'btn-success',
                    unselectedClass: ''
                });

                $('#convert_example_2').iconpicker().on('change', function(e) {
                    $("#console").prepend(e.icon+'</br>');
                });

                $('#convert_example_3')
                        .iconpicker()
                        .iconpicker('setAlign', 'center')
                        .iconpicker('setArrowClass', 'btn-success')
                        .iconpicker('setArrowPrevIconClass', 'glyphicon glyphicon-chevron-left')
                        .iconpicker('setArrowNextIconClass', 'glyphicon glyphicon-chevron-right')
                        .iconpicker('setCols', 9)
                        .iconpicker('setFooter', true)
                        .iconpicker('setHeader', true)
                        .iconpicker('setIcon', 'glyphicon-pause')
                        .iconpicker('setIconset', {
                            iconClass: 'glyphicon',
                            iconClassFix: 'glyphicon-',
                            icons: [
                                'fast-backward',
                                'step-backward',
                                'backward',
                                'play',
                                'pause',
                                'stop',
                                'forward',
                                'step-forward',
                                'fast-forward',
                            ],
                        })
                        .iconpicker('setLabelHeader', '{0} of {1} pages')
                        .iconpicker('setLabelFooter', '{0} - {1} of {2} icons')
                        .iconpicker('setPlacement', 'bottom')
                        .iconpicker('setRows', 0)
                        .iconpicker('setSearch', true)
                        .iconpicker('setSearchText', 'Type text')
                        .iconpicker('setSelectedClass', 'btn-danger')
                        .iconpicker('setUnselectedClass', 'btn-primary');

            });

        </script>

        <!-- Button Builder Example -->
        <script type="text/javascript">

            $(function(){
                var show_result = function(){
                    $('#result').text($('#button').html().trim());
                };

                show_result();

                $('#btn-text').on('focusout', function(e) {
                    $('#btn-icon-positions button[value="' + $('#button').data('position') + '"]').trigger('click')
                    show_result();
                });

                $('#btn-colors button').on('click', function(e) {
                    $('#button a').removeClass('btn-default btn-primary btn-info btn-success btn-warning btn-danger').addClass($(this).val());
                    show_result();
                });

                $('#btn-sizes button').on('click', function(e) {
                    $('#button a').removeClass('btn-xs btn-sm btn-lg').addClass($(this).val());
                    show_result();
                });

                $('#btn-sizes a').on('click', function(e) {
                    $('#button a').toggleClass('btn-block');
                    show_result();
                });

                $('#btn-icon').iconpicker({
                    rows: 5,
                    cols: 10,
                    align: 'left'
                });

                $('#btn-icon').on('change', function(e) {
                    $('#button a > i').attr('class', '').addClass('fa ' + e.icon);
                    show_result();
                });

                $('#btn-icon-positions button').on('click', function(e) {
                    var icon = $('#button a > i');
                    var text = $('#btn-text').val();
                    $('#button a').empty();
                    if($(this).val() == 'left'){
                       $('#button a').append(icon).append(' ' + text);
                    }
                    else{
                       $('#button a').append(text + ' ').append(icon);
                    }
                    $('#button').data('position', $(this).val());
                    show_result();
                });
            });

        </script>

        <script type="text/javascript">

            $(function(){
                $('#btnDonate').bind('click', function(e){
                    e.preventDefault();
                    $('#formDonate').submit();
                });

                $.getJSON( "https://api.github.com/repos/victor-valencia/bootstrap-iconpicker", function( data ) {
                    $('#btnStars').html(data.stargazers_count);
                    $('#btnForks').html(data.forks_count);
                });

                $.getJSON( "https://api.github.com/repos/victor-valencia/bootstrap-iconpicker/tags", function( data ) {
                    $('#btnReleases').html(data.length);

                    var url = "https://github.com/victor-valencia/bootstrap-iconpicker/archive/" + data[0].name;

                    $('#btnGithub').html($('#btnGithub').html().replace('{0}', data[0].name));

                    $('#btnDownloadZip').attr('href', url + '.zip');
                    $('#btnDownloadZip').html($('#btnDownloadZip').html().replace('{0}', data[0].name));

                    $('#btnDownloadTar').attr('href', url + '.tar.gz');
                    $('#btnDownloadTar').html($('#btnDownloadTar').html().replace('{0}', data[0].name));
                });

                $.getJSON( "https://api.github.com/repos/victor-valencia/bootstrap-iconpicker/contributors", function( data ) {
                    $('#btnContributors').html(data.length);
                });

                $('[role="menu"] a').on('click', function(){
                    $("#tabConfig").html($(this).html() + ' <span class="caret"></span>');
                });
            });
        </script>

        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

            ga('create', 'UA-38890641-4', 'auto');
            ga('send', 'pageview');
        </script>

        <div id="fb-root"></div>
        <script>
            (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));
        </script>

    </body>
</html>
